<template>
    <div class="container">
        <div class="header">
            <div class="top">
                <div class="text">
                    <span>
                        请选择您关注的年度
                    </span>
                </div>
                <el-select v-model="value" placeholder="2000">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="bottom">
                <el-button type="primary" size="mini">查询</el-button>
            </div>
        </div>
        <economy :economydata="economydata"></economy>
        <div class="three">
            <trade :trade="trade"></trade>
            <div class="right">
                <shi :shi="shi"></shi>
                <fu :fu="fu"></fu>
            </div>
        </div>
        <div class="four">
            <div class="title">
                人口概况
            </div>
            <div class="bto">
                <div class="one">
                    <div class="shu">
                        12.63亿
                    </div>
                    <div class="text">
                        人口总数
                    </div>
                </div>
                <div class="two">
                    <div class="shu">
                        48.7%
                    </div>
                    <div class="text">
                        女性人口比例
                    </div>
                </div>
                <div class="thr">
                    <div class="shu">
                        14.03
                    </div>
                    <div class="text">
                        粗出生率（每千人）
                    </div>
                </div>
                <div class="for">
                    <div class="shu">
                        6.45
                    </div>
                    <div class="text">
                        粗死亡率（每千人）
                    </div>
                </div>
            </div>
        </div>
        <div class="five">
            <labor :labor="labor"></labor>
            <unemployment :unemployment="unemployment"></unemployment>
        </div>
        <div class="six">
            <div>
                <div class="title">
                    人口通电率
                </div>
                <population></population>
            </div>
            <statistics :statistics="statistics"></statistics>
        </div>
    </div>
</template>

<script>

import economy from './economy.vue'
import trade from './trade.vue'
import fu from './fu.vue'
import shi from './shi.vue'
import labor from './labor.vue'
import population from './population.vue'
import statistics from './statistics.vue'
import unemployment from './unemployment.vue'

export default {
    data() {
        return {
            options: [{
                value: '选项1',
                label: '2000'
            }, {
                value: '选项2',
                label: '2001'
            }, {
                value: '选项3',
                label: '2002'
            }, {
                value: '选项4',
                label: '2003'
            }, {
                value: '选项5',
                label: '2004'
            }],
            value: '',
            economydata: {
                datax: ['2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014'],
                datay: [17.22, 20.36, 22.40, 24.67, 27.48, 30.98, 35.38, 38.80, 42.45, 45.96, 51.45, 55.49, 59.80, 64.17],
                datay1: [8.5, 8.3, 9.1, 10, 10.1, 11.4, 12.7, 14.2, 9.7, 9.4, 10.6, 9.60, 7.9, 7.8, 7.39],
            },
            trade: {
                datax: ['2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014'],
                datay: [ // 数据给升序
                    {
                        ip: '1.3.2.6',
                        value: 0.249
                    },
                    {
                        ip: '1.3.2.6',
                        value: 0.266
                    },
                    {
                        ip: '1.3.2.6',
                        value: 0.355
                    },
                    {
                        ip: '1.3.2.6',
                        value: 0.483
                    },
                    {
                        ip: '1.3.2.6',
                        value: 0.593
                    },
                    {
                        ip: '1.3.2.6',
                        value: 0.761
                    },
                    {
                        ip: '1.3.2.6',
                        value: 0.968
                    },
                    {
                        ip: '1.3.2.6',
                        value: 1.22
                    },
                    {
                        ip: '1.3.2.6',
                        value: 1.43
                    },
                    {
                        ip: '1.3.2.6',
                        value: 1.20
                    },
                    {
                        ip: '1.3.2.6',
                        value: 1.58
                    },
                    {
                        ip: '1.3.2.6',
                        value: 1.60
                    },
                    {
                        ip: '1.3.2.6',
                        value: 1.67
                    },
                    {
                        ip: '1.3.2.6',
                        value: 1.96
                    },

                ],
                datay1: [ // 数据给升序
                    {
                        ip: '1.3.2.6',
                        value: -0.249
                    },
                    {
                        ip: '1.3.2.6',
                        value: -0.266
                    },
                    {
                        ip: '1.3.2.6',
                        value: -0.355
                    },
                    {
                        ip: '1.3.2.6',
                        value: -0.483
                    },
                    {
                        ip: '1.3.2.6',
                        value: -0.593
                    },
                    {
                        ip: '1.3.2.6',
                        value: -0.761
                    },
                    {
                        ip: '1.3.2.6',
                        value: -0.968
                    },
                    {
                        ip: '1.3.2.6',
                        value: -1.22
                    },
                    {
                        ip: '1.3.2.6',
                        value: -1.43
                    },
                    {
                        ip: '1.3.2.6',
                        value: -1.20
                    },
                    {
                        ip: '1.3.2.6',
                        value: -1.58
                    },
                    {
                        ip: '1.3.2.6',
                        value: -1.89
                    },
                    {
                        ip: '1.3.2.6',
                        value: -2.05
                    },
                    {
                        ip: '1.3.2.6',
                        value: -2.21
                    },
                    {
                        ip: '1.3.2.6',
                        value: -2.34
                    }
                ]
            },
            fu: {
                data: [
                    { value: 36.24, name: '旅行服务出口比例' },
                    { value: 28.73, name: '交通服务出口比例' },
                    { value: 7.1, name: '其他服务出口比例' },
                    { value: 27.69, name: '计算机、通讯和其他服务出口比例' },
                    { value: 0.24, name: '保险与金融服务比例' },
                ],
            },
            shi: {
                data: [
                    { value: 75.08, name: '制造业出口比例' },
                    { value: 15.07, name: '信息与通讯技术出口比例' },
                    { value: 2.68, name: '燃料出口比例' },
                    { value: 0.92, name: '农业原材料出口比例' },
                    { value: 4.63, name: '食品出口比例' },
                    { value: 1.62, name: '矿石和金属出口比例' },
                ],
            },
            labor: {
                datax: ['2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014'],
                datay: ['8.63', '8.75', '8.91', '9.09', '9.26', '9.40', '9.52', '9.61', '9.68', '9.74', '9.80', '9.84', '9.88', '9.91', '9.94',],
                datay1: ['68.3', '68.8', '69.6', '70.6', '71.5', '72.1', '72.6', '72.9', '73.1', '73.2', '73.2', '73.1', '73.0', '72.8', '73.0']

            },
            unemployment: {
                datax: ['2000', '2002', '2004', '2006', '2008', '2010', '2012', '2014'],
                datay: [2.233, 3.443, 3.54, 3.72, 3.68, 3.78, 3.90, 3.99],
                datay1: [3.233, 4.443, 4.54, 4.22, 4.68, 4.78, 5.09, 5.10],
            },
            statistics: {
                datax: ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014'],
                dataone: [0.233, 0.443, 0.54, 0.22, 0.68, 0.78, 0.45, 0.66, 0.77, 0.33, 0.90, 0.89, 0.89, 0.55, 0.55],
                datatwo: [1.233, 1.443, 1.54, 1.22, 1.68, 1.78, 1.45, 1.66, 1.77, 1.33, 1.90, 1.89, 1.89, 1.55, 1.55],
                datathree: [2.233, 2.443, 2.54, 2.22, 2.68, 2.78, 2.45, 2.66, 2.77, 2.33, 2.90, 2.89, 2.89, 2.55, 2.55],
                datafour: [14.233, 14.443, 14.54, 14.22, 14.68, 14.78, 14.45, 14.66, 14.77, 14.33, 14.90, 14.89, 14.89, 14.55, 14.55],

            }
        }
    },
    components: {
        economy,
        trade,
        fu,
        shi,
        labor,
        population,
        statistics,
        unemployment
    }

}

</script>

<style lang="less" scoped>
/deep/.el-input__inner {
    margin-top: 10px;
    width: 980px;
    height: 30px;

}


/deep/.el-button--primary {
    border-radius: 0%;
    background-color: #108cee;
    font-size: 14px;
}

.container {
    width: 100%;
    height: 1530px;
    background-color: #ebebeb;
    padding-top: 12px;

    .header {
        width: 1237px;
        height: 114px;
        background-color: #fff;
        margin: 0 auto;

        .top {
            width: 100%;
            height: 34px;
            display: flex;
            align-items: center;

            .text {
                position: relative;
                min-height: 1px;
                padding-right: 15px;
                padding-left: 90px;
                padding-top: 7px;
                text-align: right;

                color: #5e5d5e;

                span {
                    font-size: 13px;
                }
            }


        }

        .bottom {
            margin-top: 30px;
            margin-left: 222px;
        }
    }

    .three {
        margin-top: 15px;
        width: 1237px;

        margin: 15px auto;
        height: 380px;
        // background-color: #ebebeb;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .right {
            width: 510px;
            height: 100%;
            // background-color: #ebebeb;


        }
    }

    .four {

        width: 1237px;
        margin: 15px auto;
        height: 140px;
        background-color: #fff;

        .title {
            box-sizing: border-box;
            width: 100%;
            height: 40px;
            padding: 10px;
            font-size: 14px;
        }

        .bto {
            box-sizing: border-box;

            display: flex;
            text-align: center;
            color: #fff;

            .shu {
                font-size: 25px;
                padding-bottom: 10px;
            }

            .one {
                box-sizing: border-box;
                padding-top: 20px;
                width: 25%;
                height: 100px;
                background-color: #319ae5;
            }

            .two {
                box-sizing: border-box;
                padding-top: 20px;
                width: 25%;
                height: 100px;
                background-color: #32df48;
            }

            .thr {
                box-sizing: border-box;
                padding-top: 20px;
                width: 25%;
                height: 100px;
                background-color: #d067e9;
            }

            .for {
                box-sizing: border-box;
                padding-top: 20px;
                width: 25%;
                height: 100px;
                background-color: #fcbc04;
            }
        }
    }

    .five {

        width: 1237px;
        margin: 0 auto;
        height: 260px;

        display: flex;
        justify-content: space-between;



    }

    .six {
        width: 1237px;
        margin: 0 auto;
        height: 260px;

        display: flex;
        justify-content: space-between;

        .title {
            background-color: #fff;
            margin-top: 15px;
            padding-top: 10px;
            padding-left: 10px;
            color: rgb(85, 85, 85);
            font-size: 14px;
            font-weight: 100;
        }
    }
}
</style>